<!--  -->
<template>
  <div>
  {{ prices}}
    <el-form ref="ruleFormRef"   label-width="auto" class="demo-ruleForm">
      <el-form-item label="商品名称">
        <el-input v-model="product.name"/>
      </el-form-item>
      <el-form-item label="商品描述">
        <el-input v-model="product.comment" />
      </el-form-item>
      <el-form-item label="商品价格">
        <el-table :data="prices">


          <el-table-column v-for="(item,index) in state.norms" :label="item.title" width="180">
            <template #default="scope">

              <el-select
       @change="normChange(scope.$index)"
      placeholder="Select"
      size="large"
      style="width:140px"
      v-model="scope.row.packageIds[index]"
    >
      <el-option
        v-for="sitem in item.children"
        :key="sitem.iid"
        :label="sitem.title"
        :value="sitem.id"
      />
    </el-select>

            </template>
          </el-table-column>




          <el-table-column label="价格" width="120">
            <template #default="scope">
              <el-input v-model="scope.row.price" type="text"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="图片" width="120">
            <template #default="scope">

              <el-upload
    class="avatar-uploader"
    :action="uploadBaseUrl"
    :show-file-list="false"
    :on-success="(response:any,uploadFile:any)=>handleAvatarSuccess(response,uploadFile,scope.$index)"
  >
  <img v-if="scope.row.pic" :src="imgBaseUrl+scope.row.pic" class="avatar" />
    <el-button v-else type="default">上传图片</el-button>
  </el-upload>


              
            </template>
          </el-table-column>

          <el-table-column label="" width="120">
            <template #header>
              <el-button @click="addRow" type="default"> + </el-button>
      </template>

            <template #default="scope">
              <el-button  @click="jianRow(scope.$index)"  type="default"> - </el-button>
            </template>
          </el-table-column>
          
        </el-table>
      </el-form-item>

      <el-form-item label="">
        <el-button type="primary" @click="submit"> 提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
const imgBaseUrl = import.meta.env.VITE_IMG_URL;
const uploadBaseUrl = import.meta.env.VITE_BASE_URL + "api/upload/add";
import { reactive, toRefs, ref, onMounted, toRaw } from "vue";

import {getNorms} from '../services/product/norms'

import {convertToTree} from '../utils/treeUtils'

let normlist:any=[];
const state=reactive<any>({
  norms:[]
})

const product=reactive({
  id:0,
  name:"",
  comment:"",
  prices:[]
})
const handleAvatarSuccess=(response:any,uploadFile:any,index:number)=>{
  console.log(index);
    console.log(response);
    console.log(uploadFile);

    if(response.errCode==10000){
      prices.value[index].pic=response.data;
    }
  
}
const normChange=(index:number)=>{

  let packageIds=JSON.parse(JSON.stringify(prices.value[index])).packageIds;
  let pkgs:string | null[]=[];
    packageIds.forEach((id:number | null)=>{
     !id && pkgs.push(null);
     let png= normlist.find((item:any)=>item.id==id)?.title;
     png &&  pkgs.push(png);


  })
  prices.value[index].proPackage=pkgs.join(",");
  

}

const getNormList=async ()=>{

   const res:any=await getNorms({page:1,psize:10000}).catch(()=>{});
   if(res?.errCode===10000){

    normlist=res.data.list;
    state.norms=convertToTree(normlist);
   }

}
onMounted(()=>{
  getNormList();
})
const prices = ref<any>([
  {
    price: "",
    pic: "",
    proPackage:"",
    packageIds:[]
  },
]);

const addRow=()=>{

  prices.value.push({
    price:"",
    pic: "",
    proPackage:"",
    packageIds:[]
  });

}

const jianRow=(index:number)=>{

  prices.value.splice(index,1);
}

const submit=()=>{

  product.prices= prices.value.map((item:any)=>({...item,packageIds:item.packageIds.join(",")}));

  console.log(toRaw(product));
  

}
</script>
<style scoped>
.avatar{
  height: 50px;
  width: 50px
}
</style>
